<template>
  <div id="container">
    <h1>作用域插槽使用场景</h1>
    <UserTable></UserTable>
    <Manyslot></Manyslot>
    <UserDirective></UserDirective>
  </div>
</template>

<script>

import UserTable from "@/UserTable.vue";
import Manyslot from "@/Manyslot.vue";
import UserDirective from "@/UserDirective.vue";
export default {
  components: {
    UserTable,
    Manyslot,
    UserDirective
  },
};
</script>

<style>
#app {
  width: 400px;
  margin: 20px auto;
  background-color: #fff;
  border: 4px solid blueviolet;
  border-radius: 1em;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
  padding: 1em 2em 2em;
}
</style>